<template>
  <div id="login">
    <div>
      <form action method>
        <Row class="close">
          <Col span="2">
            <van-icon name="cross" @click="()=>{this.$router.push({path:'/my'})}" />
          </Col>
          <Col span="20"></Col>
          <Col span="2"></Col>
        </Row>
        <Row class="margin_left_right maxTitle">
          <Col span="24">
            <span>路飞学城</span>
          </Col>
        </Row>
        <Row class="margin_left_right input">
          <Col span="24">
            <input
              type="text"
              name="username"
              style="color:#d2d2d2;"
              placeholder="手机号 / 用户名"
              value
              ref="inputUsername"
              @keyup="keyUserUpDown('inputUsername')"
            />
          </Col>
        </Row>
        <Row class="margin_left_right input">
          <Col span="22">
            <input
              ref="inputPass"
              type="password"
              name="password"
              style="color:#d2d2d2;"
              placeholder="密码"
              value
              @keyup="keyPassUpDown('inputPass')"
            />
          </Col>
          <Col span="2" class="icon">
            <Icon type="md-eye" v-if="showPassword" @click="changeShowPass()" />
            <Icon type="md-eye-off" v-else @click="changeShowPass()" />
          </Col>
        </Row>
        <Row class="margin_left_right wang_Password">
          <Col span="16">
            <router-link to="/resetpass">忘记密码</router-link>
          </Col>
          <Col span="8">
            <router-link to="/phonefast">手机号快捷登入</router-link>
          </Col>
        </Row>
        <Row class="margin_left_right input">
          <Col span="24">
            <Button type="success" :disabled="isDisabled" size="large" to="/" long>登入</Button>
          </Col>
        </Row>
        <Row class="protocel_bottom">
          <Col span="2"></Col>
          <Col span="24" class="protocel_parent">
            <span class="agree">
              登入代表您已阅读并同意
              <router-link to="/" tag="span" class="protocol">《用户协议》</router-link>
            </span>
          </Col>
          <Col span="2"></Col>
        </Row>
      </form>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Button, Row, Col } from "view-design";
import { Icon } from "vant";
Vue.use(Icon);
export default {
  name: "login",
  components: {
    Button,
    Row,
    Col,
    Icon
  },
  data() {
    return {
      showPassword: true,
      isDisabled: false
    };
  },
  computed: {},
  watch: {},
  methods: {
    changeShowPass() {
      this.showPassword = !this.showPassword;
      if (this.showPassword) {
        this.$refs.inputPass.type = "password";
      } else {
        this.$refs.inputPass.type = "text";
      }
    },
    keyPassUpDown(input) {
      console.log(this.$refs.inputPass.value.length);
      if (input === "inputPass" && this.$refs.inputPass.value.length > 0) {
        this.$refs.inputPass.style = "color:#000;";
        console.log("password black");
      } else {
        this.$refs.inputPass.style = "color:#d2d2d2;";
        console.log("password c5c5c5");
      }
    },
    keyUserUpDown(input) {
      console.log(this.$refs.inputUsername.value.length);
      if (
        input === "inputUsername" &&
        this.$refs.inputUsername.value.length > 0
      ) {
        this.$refs.inputUsername.style = "color:#000;";
        console.log("username black");
      } else {
        this.$refs.inputUsername.style = "color:#d2d2d2;";
        console.log("username c5c5c5");
      }
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
.close {
  margin: 40px 10px;
  font-size: 22px;
}
.margin_left_right {
  margin: 40px;
}
.maxTitle {
  font-size: 25px;
}
.protocel_parent {
  text-align: center;
}
.input {
  font-size: 16px;

  color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #000;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

.input input {
  padding-bottom: 10px;
  width: 100%;
  height: 100%;
}
.icon {
  text-align: right;
  color: black;
  font-size: 22px;
}
.wang_Password {
  font-size: 14px;
  color: black;
}
.protocel_parent {
  font-size: 14px;
}
.agree {
  font-size: 12px;
  color: #999;
}
.protocol {
  color: cornflowerblue;
}
.protocel_bottom {
  margin-top: 50%;
}
</style>